<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>重置密码 - {{admin_setting('name')}}</title>
    
    <!-- 引入与登录页一致的Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- 统一字体和配色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-white text-dark antialiased">
    <!-- 复用统一导航栏 -->
    <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 md:px-6 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
                    <i class="fa-solid fa-link text-xl"></i>
                </div>
                <span class="text-xl font-bold text-dark">{{admin_setting('name')}}</span>
            </div>
            
            <nav class="hidden md:flex items-center space-x-8">
                <a href="/" class="text-dark hover:text-primary transition-colors font-medium">首页</a>
                <a href="/user/login" class="text-dark hover:text-primary transition-colors font-medium">登录</a>
                <a href="/user/register" class="text-dark hover:text-primary transition-colors font-medium">注册</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <a href="/user/register" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">免费注册</a>
                
                <button id="menuBtn" class="md:hidden text-dark focus:outline-none">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单保持一致性 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="/" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">首页</a>
                <a href="/user/login" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">登录</a>
                <a href="/user/register" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">注册</a>
            </div>
        </div>
    </header>

    <!-- 重置密码表单 -->
    <main class="pt-20 container mx-auto px-4 md:px-6">
        <div class="max-w-md mx-auto">
            <!-- 错误提示 -->
            @if(session('danger'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-600">
                <div class="flex items-center">
                    <i class="fa-solid fa-triangle-exclamation mr-2"></i>
                    <span>{{ session('danger') }}</span>
                </div>
            </div>
            @endif
            @if(session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-600">
                <div class="flex items-center">
                    <i class="fa-solid fa-check-circle mr-2"></i> 
                    <span>{{ session('success') }}</span>
                </div>
            </div>
            @endif

            <!-- 重置密码表单 -->
            <form action="{{ url()->current() }}" method="post" class="bg-white p-8 rounded-xl shadow-md">
                @csrf
                <h2 class="text-2xl font-bold mb-6 text-center">重置密码</h2>
                
                <div class="mb-6">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">注册邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-envelope text-gray-400"></i>
                        </div>
                        <input type="email" name="email" id="email" 
                               class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary shadow-sm transition-all"
                               placeholder="请输入注册邮箱" required/>
                    </div>
                </div>
                
                <div class="mb-6 flex">
                    <div class="w-full mr-2">
                        <label for="code" class="block text-sm font-medium text-gray-700 mb-2">验证码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa-solid fa-shield text-gray-400"></i>
                            </div>
                            <input type="text" name="code" id="code" maxlength="6"
                                   class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary shadow-sm transition-all"
                                   placeholder="输入验证码" required/>
                        </div>
                    </div>
                    <div class="w-1/3 self-end ml-2">
                        <button type="button" id="sendCodeBtn"
                                class="w-full bg-secondary hover:bg-secondary/90 text-white py-2 px-3 rounded-lg font-medium shadow-md hover:shadow-lg transition-all">
                            发送验证码
                        </button>
                    </div>
                </div>
                
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">新密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" name="password" id="password" 
                               class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary shadow-sm transition-all"
                               placeholder="不少于6位" minlength="6" required/>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 gap-4">
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-4 rounded-lg font-medium shadow-md hover:shadow-lg transition-all">
                        确认重置
                    </button>
                    <a href="/user/login" class="w-full text-center border border-primary text-primary hover:bg-primary/5 py-3 px-4 rounded-lg font-medium transition-all">
                        返回登录
                    </a>
                </div>
            </form>
        </div>
    </main>

    <!-- 页脚保持一致性 -->
    <footer class="bg-dark text-white pt-16 pb-8 mt-12">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center">
                <p class="text-gray-500">&copy; {{ date('Y') }} {{admin_setting('name')}}. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- 验证码发送逻辑 -->
    <script>
        // 表单验证和验证码发送逻辑
        const emailInput = document.getElementById('email');
        const codeInput = document.getElementById('code');
        const passwordInput = document.getElementById('password');
        const sendCodeBtn = document.getElementById('sendCodeBtn');

        // 邮箱格式验证
        function validateEmail(email) {
            const rxp = new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
            return rxp.test(email);
        }

        // 密码强度验证
        function validatePassword(password) {
            return password.length >= 6;
        }

        // 发送验证码
        sendCodeBtn.addEventListener('click', function() {
            const email = emailInput.value;
            
            if (!validateEmail(email)) {
                alert('请输入有效的邮箱地址');
                return;
            }

            // 禁用按钮并启动倒计时
            let count = 60;
            sendCodeBtn.disabled = true;
            sendCodeBtn.textContent = `${count}秒后重发`;
            
            const timer = setInterval(() => {
                count--;
                if (count > 0) {
                    sendCodeBtn.textContent = `${count}秒后重发`;
                } else {
                    clearInterval(timer);
                    sendCodeBtn.disabled = false;
                    sendCodeBtn.textContent = '发送验证码';
                }
            }, 1000);

            // 发送验证码请求（需后端实现）
            fetch('/api/email/verify', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                },
                body: JSON.stringify({ email: email })
            })
            .then(response => response.json())
            .then(data => {
                if(data.status == 1) {
                        alert("验证码已发送至您的邮箱，请查收！");
                        startCountdown();
                    } else {
                        alert(data.msg);
                    }
            })
            
        });

        // 表单提交验证
        document.querySelector('form').addEventListener('submit', function(e) {
            const email = emailInput.value;
            const code = codeInput.value;
            const password = passwordInput.value;

            if (!validateEmail(email)) {
                e.preventDefault();
                alert('请输入有效的邮箱地址');
                return;
            }

            if (code.length !== 6) {
                e.preventDefault();
                alert('请输入6位验证码');
                return;
            }

            if (!validatePassword(password)) {
                e.preventDefault();
                alert('密码长度至少6位');
                return;
            }
        });

        // 导航栏交互逻辑复用登录页
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });
        
        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            const icon = menuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });
        
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                        const icon = menuBtn.querySelector('i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                }
            });
        });
    </script>
</body>
</html>